<template>
    <div class="main-body">
        <el-tag type="success">{{ count }}</el-tag>
        <div>
            <el-tag type="success">{{ data }}</el-tag>
        </div>
        <span class="test" :class="[count%2===0?'test-odd':'']">computed1: {{ computed11 }}</span>
        <div>
            <el-button @click="increment">增加</el-button>
        </div>
        <div style="width: 600px;background-color: #17181a; ">
            <svg
                class="line-svg"
                width="100%"
                height="100%"
                viewBox="0 0 375 28"
                preserveAspectRatio="none"
                xmlns="http://www.w3.org/2000/svg"
            >
                <defs>
                    <radialGradient
                        id="radialGradient-1"
                        class="lineRad"
                        cx="50%"
                        cy="0%"
                        fx="50%"
                        fy="0%"
                        r="112.379506%"
                        gradientTransform="translate(0.500000,0.000000),scale(0.04,1.000000),rotate(90.000000),scale(5.000000,7.623189),translate(-0.500000,-0.000000)"
                    >
                        <stop offset="0%" :class="handleLine('start')"></stop>
                        <stop
                            offset="100%"
                            :class="handleLine('end')"
                        ></stop>
                    </radialGradient>
                </defs>
                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g
                        transform="translate(0.000000, -125.000000)"
                        stroke="url(#radialGradient-1)"
                        stroke-width="3"
                    >
                        <g transform="translate(0.000000, 96.000000)">
                            <path
                                d="M0,30 C64,46 127,54.9513355 187.25532,54.9513355 C247.459053,54.9513355 310,46 375,30"
                            ></path>
                        </g>
                    </g>
                </g>
            </svg>
            <swiper-container class="swiper-container-customer" :slides-per-view="3"
                              @swipersettranslate="onSetTranslate"
                              centered-slides="true"
                              watchSlidesProgress="true"
                              @swipersettransition="onSetTransition"
                              speed="600">
                <swiper-slide v-for="(_,index) in swiperCount" class="slide">
                    <div class="circle" :style="handleBg()"></div>
                    <div
                        v-if="activeIndex === index"
                        class="slide-lv-title"
                        :class="handleFontColor()"
                    >
                        {{ index }}
                    </div>
                </swiper-slide>
            </swiper-container>
        </div>
        <div>
            <svg width="80px" height="30px" viewBox="0 0 80 30"
                 xmlns="http://www.w3.org/2000/svg">

                <defs>
                    <linearGradient id="Gradient01">
                        <stop offset="20%" stop-color="#f00"/>
                        <stop offset="40%" stop-color="#00f"/>
                        <stop offset="60%" stop-color="#0f0"/>
                    </linearGradient>
                </defs>

                <rect x="10" y="10" width="60" height="10"
                      fill="url(#Gradient01)"/>
            </svg>
        </div>
    </div>
</template>
<script setup lang="ts">
import {SwiperSlide} from 'swiper/vue';
import 'swiper/css';
import {computed, reactive, ref} from 'vue'

let activeIndex = ref(0)
let swiperCount = ref(7)
const data = reactive({
    name: "张三",
    age: 15
})
let count = ref(0)
const computed11 = computed(() => {
    return count.value + data.age
})

function increment() {
    count.value++
    data.age++
}

function handleLine(type: string) {
    return `v${activeIndex.value}-${type}`;
}

function onSetTranslate(e: any) {
    const [swiper] = e.detail;
    let slides = swiper.slides;
    for (let i = 0; i < slides.length; i++) {
        let progress = slides[i].progress;
        slides[i].style.opacity = 1 - Math.abs(progress) / 1.75;
        slides[i].style.transform = "translate(0,-"
            .concat(`${(-0.67 * Math.cos(progress) + 0.7) * 100}`, "px) scale(")
            .concat(`${1 - Math.abs(progress) / 4}`, ")");
    }
}

function onSetTransition(e: any) {
    const [swiper, transition] = e.detail;
    activeIndex.value = swiper.activeIndex;
    let slides = swiper.slides;
    for (let i = 0; i < slides.length; i++) {
        slides[i].style.transition = transition + "ms";
    }
}

function handleBg() {
    return {
        background: "#FFFFFF",
    };
}

function handleFontColor() {
    return `v${activeIndex.value}`;
}
</script>

<style scoped lang="scss">
.test {
    background-color: rgb(255, 0, 0);
    transition: all 1s;
}

.test-odd {
    background-color: rgb(0, 255, 0);
}

.swiper-container-customer {
    height: 140px;
    position: relative;
}

.line-svg {
    height: 70px;
    position: absolute;
    width: 600px;

    .lineRad {
        .v0-start {
            stop-color: #f9ddd3;
            stop-opacity: 1;
        }

        .v0-end {
            stop-color: rgb(249, 221, 211,);
            stop-opacity: 0.2;
        }

        .v1-start {
            stop-color: #9fd1f1;
            stop-opacity: 1;
        }

        .v1-end {
            stop-color: rgb(159, 209, 241);
            stop-opacity: 0.2;
        }

        .v2-start {
            stop-color: #fbe6ac;
            stop-opacity: 1;
        }

        .v2-end {
            stop-color: rgb(251, 230, 172,);
            stop-opacity: 0.2;
        }

        .v3-start {
            stop-color: #bfbebe;
            stop-opacity: 1;
        }

        .v3-end {
            stop-color: rgb(191, 190, 190);
            stop-opacity: 0.2;
        }

        .v4-start {
            stop-color: #cbb6f9;
            stop-opacity: 1;
        }

        .v4-end {
            stop-color: rgb(203, 182, 249,);
            stop-opacity: 0.2;
        }

        .v5-start {
            stop-color: #ffc3ff;
            stop-opacity: 1;
        }

        .v5-end {
            stop-color: rgb(255, 195, 255);
            stop-opacity: 0.2;
        }

        .v6-start {
            stop-color: #ffcfd8;
            stop-opacity: 1;
        }

        .v6-end {
            stop-color: rgb(255, 207, 216);
            stop-opacity: 0.2;
        }
    }
}

.slide {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    .slide-lv-title {
        font-size: 20px;
        position: absolute;
        top: 20px;
        color: #ffffff;
        background: linear-gradient(
                0deg,
                rgba(248, 213, 201, 1),
                rgba(255, 250, 248, 1),
                rgba(248, 213, 201, 1)
        );
        border-radius: 100px;
        padding: 1px 10px;
    }

    .v0 {
        color: #ad6353;
        background: linear-gradient(
                0deg,
                rgba(248, 213, 201, 1),
                rgba(255, 250, 248, 1),
                rgba(248, 213, 201, 1)
        );
    }

    .v1 {
        color: #225786;
        background: linear-gradient(
                0deg,
                rgba(195, 223, 248, 1),
                rgba(255, 255, 255, 1),
                rgba(195, 223, 248, 1)
        );
    }

    .v2 {
        color: #9c5c15;
        background: linear-gradient(
                0deg,
                rgba(252, 235, 188, 1),
                rgba(255, 255, 255, 1),
                rgba(252, 235, 188, 1)
        );
    }

    .v3 {
        color: #333333;
        background: linear-gradient(
                0deg,
                rgba(169, 168, 168, 1),
                rgba(255, 255, 255, 1),
                rgba(169, 168, 168, 1)
        );
    }

    .v4 {
        color: #5a2cc2;
        background: linear-gradient(
                0deg,
                rgba(201, 180, 249, 1),
                rgba(255, 255, 255, 1),
                rgba(201, 180, 249, 1)
        );
    }

    .v5 {
        color: #9d3c9d;
        background: linear-gradient(
                0deg,
                rgba(255, 195, 255, 1),
                rgba(255, 255, 255, 1),
                rgba(255, 195, 255, 1)
        );
    }

    .v6 {
        color: #ce405a;
        background: linear-gradient(
                0deg,
                rgba(255, 207, 216, 1),
                rgba(255, 255, 255, 1),
                rgba(255, 207, 216, 1)
        );
    }


    .circle {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        box-shadow: 4px 1px 4.5px #f9ddd3 inset;
    }
}
</style>